<template>
  <div class="dom-new">
    <div class="dom dom1">警情数据</div>
    <div class="dom dom2">消控室数据</div>
    <div class="dom dom3">火灾数据</div>
    <div class="dom dom4">巡查数据</div>
    <div class="dom dom5">人员数据</div>
    <div class="dom dom6">监督数据</div>
    <div class="dom dom7">单位数据</div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent } from 'vue'

defineComponent({name: 'DomNewComp'})
</script>

<style scoped lang="scss">
.dom-new {
  @apply w-full h-full relative;

  .dom {
    @apply absolute flex justify-center items-center;
    font-family: Alibaba PuHuiTi;
  }

  .dom1 {
    @apply top-[6px] left-[134px] w-[146px] h-[146px];
    background: url('./assets/icon1.png') no-repeat center;
  }

  .dom2 {
    @apply top-[53px] left-[298px] w-[116px] h-[116px];
    background: url('./assets/icon2.png') no-repeat center;
  }

  .dom3 {
    @apply top-[27px] left-[22px] w-[88px] h-[88px];
    background: url('./assets/icon3.png') no-repeat center;
  }

  .dom4 {
    @apply top-[148px] right-[42px] w-[88px] h-[88px];
    background: url('./assets/icon4.png') no-repeat center;
  }

  .dom5 {
    @apply top-[32px] right-0 w-[98px] h-[98px];
    background: url('./assets/icon5.png') no-repeat center;
  }

  .dom6 {
    @apply top-[170px] left-[247px] w-[98px] h-[98px];
    background: url('./assets/icon6.png') no-repeat center;
  }

  .dom7 {
    @apply top-[129px] left-[76px] w-[88px] h-[88px];
    background: url('./assets/icon4.png') no-repeat center;
  }
}
</style>
